<template>
  <li class="dropdown-option" :class="{'is-disabled': disabled}">
    <!-- 插槽 -->
    <slot></slot>
  </li>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'DropdownItem',
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  }
})
</script>

<style>
/* .dropdown-option .is-disabled 是错误的：这是一个后代选择器，应去掉两个类名中间的空格，才表示同一个元素同时具有dropdown-option和is-disabled */
.dropdown-option.is-disabled{
    color: #6c757d;
    pointer-events:none;/* 禁止点击 */
    background-color: transparent;
}</style>
